<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsMesElectrovalenceNhanalysis',
  });
</script>
<script lang="ts" setup>
  import { onMounted, ref, Ref, watch, defineComponent } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { basicProps } from './props';

  const props = defineProps({
    ...basicProps,
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  const initChartOptions = () => ({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          width: 1,
          color: '#019680',
        },
      },
    },

    xAxis: {
      type: 'category',
      // boundaryGap: false,
      // data: [...new Array(24)].map((_item, index) => `${index}:00`),
      data: [],
      // data: ['6:30', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: 'solid',
          color: 'rgba(226,226,226,0.5)',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'value',
        // max: 48,
        // splitNumber: 4,
        axisTick: {
          show: false,
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
          },
        },
      },
    ],
    grid: { left: '1%', right: '1%', top: '20%', bottom: 20, containLabel: true },
    legend: {
      data: ['能耗'],
    },
    title: {
      text: '',
    },
    series: [], // 初始时不设置 series 数据

  });

  onMounted(() => {
    setOptions(initChartOptions());
    console.log('props.quantity', props.quantity, props.dlByMoth);
    watch(
      [
        () => props.quantity,
        () => props.dlByMoth,
        () => props.runTime,
        () => props.avgDl,
        () => props.xAxisData,
      ],
      ([newQuantity, newDlByMonth, newRunTime, newAvgDl, newXAxisData]) => {
        console.log('newQuantity', newQuantity, newXAxisData);
        setOptions({
          ...initChartOptions(), // 重新应用初始选项
          title: {
            text:
              '月度总能耗量：' +
              newDlByMonth +
              ' (度)' +
              '     开机总时长：' +
              newRunTime +
              ' (/小时)' +
              '     平均能耗：' +
              newAvgDl +
              ' (度)',
            textStyle: {
              color: '#5ab1ef',
              lineHeight: 30,
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            // data: [...new Array(24)].map((_item, index) => `${index}:00`),
            data: newXAxisData,
            // data: ['6:30', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: 'solid',
                color: 'rgba(226,226,226,0.5)',
              },
            },
            axisTick: {
              show: true,
            },
          },
          series: [
            {
              name: '能耗',
              type: 'line',
              data: newQuantity, // 使用新的 quantity 数据
              itemStyle: {
                color: '#5ab1ef', // 根据索引设置颜色
              },
              label: {
                show: true,
                position: 'top',
              },
              
            },
          ],
        });
      },
      { immediate: true }, // 立即执行一次，以确保初始渲染
    );
  });
  // onMounted(() => {
  //   const { quantity, height } = props;
  //   console.log('data', quantity, height);
  //   setOptions({
  //     tooltip: {
  //       trigger: 'axis',
  //       axisPointer: {
  //         lineStyle: {
  //           width: 1,
  //           color: '#019680',
  //         },
  //       },
  //     },
  //     xAxis: {
  //       type: 'category',
  //       boundaryGap: false,
  //       data: [...new Array(24)].map((_item, index) => `${index}:00`),
  //       splitLine: {
  //         show: true,
  //         lineStyle: {
  //           width: 1,
  //           type: 'solid',
  //           color: 'rgba(226,226,226,0.5)',
  //         },
  //       },
  //       axisTick: {
  //         show: false,
  //       },
  //     },
  //     yAxis: [
  //       {
  //         type: 'value',
  //         max: 80000,
  //         splitNumber: 4,
  //         axisTick: {
  //           show: false,
  //         },
  //         splitArea: {
  //           show: true,
  //           areaStyle: {
  //             color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
  //           },
  //         },
  //       },
  //     ],
  //     grid: { left: '1%', right: '1%', top: '20%', bottom: 20, containLabel: true },
  //     legend: {
  //       data: ['pageA', 'pageB'],
  //     },
  //     title: {
  //       text: 'Stacked Line',
  //     },
  //     series: quantity.map((seriesData, index) => ({
  //       name: index === 0 ? 'pageA' : 'pageB',
  //       type: 'line',
  //       // stack: '总量',
  //       // smooth: true,
  //       data: seriesData.data,
  //       itemStyle: {
  //         color: index === 0 ? '#5ab1ef' : '#019680', // 根据索引设置颜色
  //       },
  //     })),
  //   });
  // });
</script>
